<template>
  <el-container>
    <el-header>
        <div class="webname">
          博客后台管理系统
        </div>
        <div class="rightbox">
            <span @click="$router.push('/')" >网站首页</span>
            <el-avatar shape="circle" key="cover" :src='avater'></el-avatar>
            <span>{{username}}</span>
            <span class="out" @click="outLogin">退出</span>
        </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu background-color='rgb(114, 111, 111)' text-color="#fff" :router='true'>
          <el-submenu index="/admin/users">
            <template slot="title">
                <i class="el-icon-user-solid"></i>
                个人中心</template>
            <el-menu-item index="/admin/users/personal">个人资料</el-menu-item>
            <el-menu-item index="/admin/users/password">修改密码</el-menu-item>
          </el-submenu>
          <el-submenu index="/admin/article">
            <template slot="title">
                <i class="el-icon-reading"></i>
                文章管理</template>
            <el-menu-item index="/admin/article/add">发布文章</el-menu-item>
            <el-menu-item index="/admin/article">文章列表</el-menu-item>
          </el-submenu>
          <el-menu-item  index="/admin/comment">
            <span slot="title">
                <i class="el-icon-s-comment"></i>
                评论管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/fans" >
            <span slot="title">
                <i class="el-icon-magic-stick"></i>
                粉丝管理</span>
          </el-menu-item>
          <el-menu-item  index="/admin/star">
            <span slot="title">
                <i class="el-icon-thumb"></i>
                点赞管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 路由占位符 -->
        <router-view/>

      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {findUserInfo } from "@/api/user";
export default {
  data() {
    return {
     avater:'',
     username:''
    }
  },
  created() {
    this.getuserInfo()
  },
  methods:{
      async getuserInfo() {
      const res = await findUserInfo(this.$store.state.user._id);
      const { user } = res.data;
      this.avater =user.avater
      this.username = user.username
      this.$store.commit('setUserInfo',user)
    },

  //退出登录
    outLogin(){
       this.$confirm("是否退出登录", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
          this.$store.commit('setUserToken',null)
          this.$store.commit('setUserInfo',null)
          this.$router.push('/login')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
    }
  }
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: rgb(114, 111, 111);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .webname{
      color: #fff;
      font-weight: 600;
      font-size: 20px;
  }
  .rightbox{
      display: flex;
      align-items: center;
      width: 22%;
      justify-content: space-around;
      font-size: 14px;
      color: rgb(228, 224, 224);
      // 网站首页 效果设置
      span:first-child:hover{
           cursor: pointer;
           
      }
      .out:hover{
          text-decoration: underline;
          cursor: pointer;
          color:rgb(40, 40, 48);
      }
  }
}
.el-aside {
  background-color: rgb(114, 111, 111);
  .el-submenu{
      font-size: 11px;
  }
}
.el-main {
  background-color: #fff;
}
.el-container {
  height: 100%;
}
</style>